<template>
  <div class="avue-tags" v-if="setting.tag" @click="contextmenuFlag=false">
    <!-- tag盒子 -->
    <div v-if="contextmenuFlag" class="avue-tags__contentmenu" :style="{left:contentmenuX+'px',top:contentmenuY+'px'}">
      <div class="item" @click="closeOthersTags">
        {{ $t('tagsView.closeOthers') }}
      </div>
      <div class="item"
           @click="closeAllTags">
        {{ $t('tagsView.closeAll') }}
      </div>
    </div>
    <div class="avue-tags__box">
      <el-tabs v-model="active" type="card" @contextmenu="handleContextmenu"
               :closable="tagLen!==1"
               @tab-click="openTag"
               @edit="menuTag">
        <!-- 下面的item.Label原来是item.fullPath       -->
        <template v-for="(item,index) in tagList" :key="index">
          <el-tab-pane :label="generateTitle(item)"
                       :name="item.value">
            <template v-slot:label>
            <span>
              {{ generateTitle(item) }}
              <!-- 下面的item.value原来是item.fullPath  -->
              <i v-if="active==item.value" class="el-icon-refresh" :class="{'turn':refresh}"
                 @click="handleRefresh"></i>
            </span>
            </template>
          </el-tab-pane>
        </template>
      </el-tabs>
      <el-dropdown class="avue-tags__menu">
        <el-button type="primary">
          {{ $t('tagsView.menu') }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <template v-slot:dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="openSearch">{{ $t('tagsView.search') }}</el-dropdown-item>
            <el-dropdown-item @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</el-dropdown-item>
            <el-dropdown-item @click="closeAllTags">{{ $t('tagsView.closeAll') }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

  </div>
</template>

<script setup>
import {useCommonStore} from "../../store/modules/common.js";
import {useRouter, useRoute} from "vue-router"
import {reactive} from "vue"
import {useNavsStore} from "@/store/modules/tags.js";

defineOptions({
  name: "tags",
})
const optionData = reactive({
  refresh: false,
  active: "",
  contentmenuX: "",
  contentmenuY: "",
  contextmenuFlag: false,
  tagName:""
})
const {refresh, active, contentmenuX, contentmenuY, contextmenuFlag,tagName} = toRefs(optionData)

watch(contextmenuFlag, ()=> {
  window.addEventListener("mousedown", watchContextmenu);
})
const route = useRoute()
const router = useRouter()

const tagWel = computed(() => {
  const navsStore = useNavsStore()
  return navsStore.tagWel;
})

const tagList = computed(() => {
  const navsStore = useNavsStore()
  return navsStore.tagList;
})
const tag = computed(() => {
  const navsStore = useNavsStore()
  return navsStore.tag;
})
watch(tag, (val) => {
  //todo 这里value原来是fullpath
  optionData.active = val.value;
}, {
  immediate: true,
})

const setting = computed(() => {
  const commonStore = useCommonStore()
  return commonStore.setting;
})

const tagLen = computed(() => {
  return tagList.value.length || 0;
})


function openSearch() {
  const commonStore = useCommonStore();
  // this.$store.commit('SET_IS_SEARCH', true)
  commonStore.SET_IS_REFRESH(true)
}

function handleRefresh() {
  console.log("handleRefresh", handleRefresh)
  optionData.refresh = true;
  const commonStore = useCommonStore();
  // this.$store.commit('SET_IS_REFRESH', false);
  commonStore.SET_IS_REFRESH(false)
  setTimeout(() => {
    // this.$store.commit('SET_IS_REFRESH', true);
    commonStore.SET_IS_REFRESH(true)
  }, 100)
  setTimeout(() => {
    optionData.refresh = false;
  }, 500)
}

function generateTitle(item) {
  // todo 这里的计算标题的方法有问题。
  // console.log("generateTitleitem3", item)
  let title = router.$avueRouter.generateTitle({
    ...item,
    ...{
      label: item.name
    }
  });
  // console.log("generateTitleitem3", title)

  title = item.label;
  // console.log("generateTitleitem3", title)
  return title;
}

function watchContextmenu(event) {
  console.log("event", event)
  if (!this.$el.contains(event.target) || event.button !== 0) {
    optionData.contextmenuFlag = false;
  }
  window.removeEventListener("mousedown", watchContextmenu)
}



function handleContextmenu(event) {
  let target = event.target;
  let flag = false;
  if (target.className.indexOf("el-tabs__item") > -1) flag = true;
  else if (target.parentNode.className.indexOf("el-tabs__item") > -1) {
    target = target.parentNode;
    flag = true;
  }
  if (flag) {
    event.preventDefault();
    event.stopPropagation();
    optionData.contentmenuX = event.clientX;
    optionData.contentmenuY = event.clientY;
    optionData.tagName = target.getAttribute("aria-controls").slice(5);
    optionData.contextmenuFlag = true;
  }
}

function menuTag(value, action) {
  if (action === "remove") {
    let {tag, key} = findTag(value);
    const navsStore = useNavsStore()
    navsStore.DEL_TAG(tag);

    // console.log("tag",tag )
    // console.log("tag",this.tag )
    // console.log("tag",tag.value )
    // console.log("tag",this.tag.value )
    // console.log("tag",this.tagList )
    // console.log("tag",key )
    if (tag.value === tag.value.value) {
      tag = tagList.value[key - 1]
      console.log("tag", tag)
      router.push({
        path: tag.value,
        query: tag.query
      })
    }
  }
}

function openTag(item) {
  let value = item.props.name
  let {tag} = findTag(value)
  // todo 这里path原来用的是path
  // console.log("openTagopenTag", item)
  // console.log("openTagopenTag", tag)
  router.push({
    path: tag.value,
    query: tag.query
  })
}

function findTag(fullPath) {
  // todo 这里label原来用的是fullPath
  let tag = tagList.value.find(item => item.value === fullPath);
  let key = tagList.value.findIndex(item => item.value === fullPath);
  return {tag, key}
}

function closeOthersTags() {
  optionData.contextmenuFlag = false;
  const navsStore = useNavsStore()
  navsStore.DEL_TAG_OTHER()
}

function closeAllTags() {
  optionData.contextmenuFlag = false;
  const navsStore = useNavsStore()
  navsStore.DEL_ALL_TAG()
  router.push(tagWel.value);
}


</script>

